////
/// Components
/// PaperStack variants
////

@import 'components/Patterns/props';
@import 'props';

///
/// Draggable layout
.draggable--original:first-child + .PaperStackItem {
  .PaperStackContent::after {
    content: none;
  }
}

///
/// Draggable Items
.PaperStackItem--isDraggable {
  cursor: get-cursor(drag);

  .PaperStackContent {
    color: get-color(coal, dark);
    background-color: white;
    border-color: currentColor;
    transition: color get-duration(fast) get-easing(),
      background-color get-duration(fast) get-easing(), transform get-duration() get-easing();
  }

  // interaction
  &:focus,
  &:hover {
    .PaperStackContent {
      color: get-color(brand, blue);
      transform: paper-stack-item(transform) translateY(get-spacing(tightest));

      &::after {
        transform: translateY(-(get-spacing(tightest)));
      }
    }
  }

  &.draggable-source--is-dragging {
    .PaperStackContent {
      color: get-color(brand, blue);

      .Pattern--typeHalftone {
        @include pattern-halftone-animated;
      }
    }
  }

  &.draggable-source--placed {
    .PaperStackContent {
      .Pattern--typePlaced {
        @include pattern-placed-animated;
      }
    }
  }

  &.draggable-mirror {
    z-index: get-z-index(overlay);

    .PaperStackContent {
      color: white;
      background-color: get-color(brand, blue);
      border-color: get-color(brand, blue);
      transform: paper-stack-item(transform, mirror);

      &::after {
        content: none;
      }
    }
  }
}
